<template>
<app-main :transparentHeader="true" :loading="loading">
  <page-carousel class="carousel"/>
  <div class='main-content'>
    <page-partner/>
    <page-featured/>
    <page-title title="NEW ARRIVAL" subtitle="THIS SEASON" style="margin-top: 30px"/>
    <new-arrival-goods style="margin-top: 60px"/>
  </div>
  <page-quick-service style="margin-bottom: 60px"/>
  <div class="main-content">
    <page-about style="margin-top: 60px"/>
    <page-counter-up/>
    <page-title title="TOP SELLERS" subtitle="BEST BRAND" style="margin-top: 30px"/>
    <page-top-select style="margin: 60px 0"/>
  </div>
  <page-testimonial/>
  <div class="main-content" style="padding: 60px 0 60px">
    <page-title title="JOURNAL" subtitle="MAGAZINE"/>
    <page-blog/>
  </div>
  <div style="background-color: #fcfcfc">
    <div class="main-content" style="padding: 20px 0 30px">
      <page-title title="KINEN OUTLETS" subtitle="SHOWROOM"/>
    </div>
    <page-out-late/>
  </div>
</app-main>
</template>

<script>
import AppMainWrapper from '@/components/wrapper/AppMainWrapper'
import PageCarousel from '@/views/part/index/PageCarousel'
import PagePartner from '@/views/part/index/PagePartner'
import PageFeatured from '@/views/part/index/PageFeatured'
import PageTitle from '@/views/part/index/PageTitle'
import NewArrivalGoods from '@/views/part/index/NewArrivalGoods'
import PageQuickService from '@/views/part/index/PageQuickService'
import PageAbout from '@/views/part/index/PageAbout'
import PageCounterUp from '@/views/part/index/PageCounterUp'
import PageTopSelect from '@/views/part/index/PageTopSelect'
import PageTestimonial from '@/views/part/index/PageTestimonial'
import PageBlog from '@/views/part/index/PageBlog'
import PageOutLate from '@/views/part/index/PageOutLate'

export default {
  name: 'AppIndex',
  components: {
    'app-main': AppMainWrapper,
    'page-carousel': PageCarousel,
    'page-partner': PagePartner,
    'page-featured': PageFeatured,
    'page-title': PageTitle,
    'new-arrival-goods': NewArrivalGoods,
    'page-quick-service': PageQuickService,
    'page-about': PageAbout,
    'page-counter-up': PageCounterUp,
    'page-top-select': PageTopSelect,
    'page-testimonial': PageTestimonial,
    'page-blog': PageBlog,
    'page-out-late': PageOutLate
  },
  data: () => {
    return {
      loading: true
    }
  },
  methods: {

  },
  mounted () {
    this.$emit('setBackgroundChange', true)
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>

  .carousel{
    z-index: 2;
  }

  .main-content{
    max-width: 1110px;
    width: 100%;
    margin: 0 auto;
  }

</style>
